<template>
  <div style="width: 500px; height: 500px">
    <div
      id="main"
      ref="mapDOM"
      class="mt-4"
      style="width: 500px; height: 500px"
    />
  </div>
</template>

<script setup lang="ts" name="MapChart">
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
import { listResultByProvinces } from "@/api/aqiMeasuredResult";
import chinaMap from "@/assets/map/china.json";
import { eventBus } from "./eventBus.js";

defineOptions({
  name: "MapChart"
});

const mapDOM = ref(null);
const option = ref({
  tooltip: {},
  series: [
    {
      type: "map",
      map: "china",
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      itemStyle: {
        areaColor: "#27408B",
        borderColor: "white",
        opacity: 0.7
      },
      emphasis: {
        label: {
          show: true,
          textStyle: {
            color: "#FFFFE0"
          }
        },
        itemStyle: {
          areaColor: "LightBlue"
        }
      },
      select: {
        itemStyle: {
          color: "#2b821d"
        }
      },
      tooltip: {
        position: [0, 0]
      },
      data: [
        // { name: "北京市", value: 0 },
        // { name: "天津市", value: 3 },
        // { name: "河北省", value: 1.2 },
        // { name: "山西省", value: 1.9 },
        // { name: "新疆维吾尔自治区", value: 4.2 },
        // { name: "辽宁省", value: 1.8 },
        // { name: "吉林省", value: 2.6 },
        // { name: "黑龙江省", value: 5.7 },
        // { name: "上海市", value: 100 },
        // { name: "江苏省", value: 3.6 },
        // { name: "浙江省", value: 3.2 },
        // { name: "安徽省", value: 4.9 },
        // { name: "福建省", value: 2.1 },
        // { name: "江西省", value: 1 },
        // { name: "广西壮族自治区", value: 2.3 }
      ]
    }
  ],
  visualMap: {
    show: true,
    // 上下端文字
    text: ["高", "低"],
    // 最小值和最大值，必须指定
    min: 0.0,
    max: 6.0,
    // 位置
    left: "5%",
    bottom: "20%",
    // 是否展示滑块
    calculable: true,
    // 从下到上的颜色
    inRange: {
      color: ["#2b821d ", "#E5514C  "]
    },
    itemHeight: 100,
    //字体颜色
    textStyle: {
      color: "LightCyan",
      map: "china"
    }
  }
});

const tableData = ref([]);
const getTableData = async () => {
  const { data } = await listResultByProvinces();
  tableData.value = data;
  console.log(tableData.value, "tableData");
};

onMounted(() => {
  var myChart = echarts.init(mapDOM.value);
  echarts.registerMap("china", chinaMap);
  myChart.setOption(option.value);

  // 在组件内部添加事件监听器
  myChart.on("click", params => {
    console.log(params.name);
    // 在发出事件的组件中
    eventBus.emit("name-updated", params.name);
  });
  // myChart.on("mouseover", params => {
  //   console.log("鼠标悬停在", params.name, "上");
  // });

  getTableData();
  watch(tableData, newVal => {
    if (newVal && newVal.length > 0) {
      newVal.forEach(item => {
        option.value.series[0].data.push({
          name: item.provinceName,
          value: item.aqiLevel
        });
      });
      myChart.setOption(option.value);
    }
  });
});
</script>

<style></style>
